<template>
  <!--
        作者：yunding
        时间：2020-06-08
        描述：超链接选择-产品
    -->
  <div class="marketing-box">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="店铺" name="shop"></el-tab-pane>
      <el-tab-pane label="主营业务" name="type"></el-tab-pane>
    </el-tabs>
    <div class="cate">
      <!--内容-->
      <div class="product-content" v-if="activeTab == 'shop'" v-loading="loading">
        <div class="table-wrap type-table">
          <el-select class="ww100" v-model="shopActive" placeholder="请选择店铺" @change="shopChange">
            <el-option v-for="(item,index) in shoplist" :key="item.shop_supplier_id" :label="item.name" :value="item.shop_supplier_id"></el-option>
          </el-select>
        </div>
      </div>
      <div class="product-content" v-if="activeTab == 'type'" v-loading="loading">
        <div class="table-wrap type-table">
          <el-cascader class="ww100" ref="cascader" v-model="categoryActive" :options="categoryList"
            :props="{ children: 'child', value: 'category_id', label: 'name' }" @change="changeCategory">
          </el-cascader>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SupplierApi from '@/api/supplier.js';
export default {
  data() {
    return {
      /*是否正在加载*/
      loading: true,
      /*tab切换选择中值*/
      activeTab: 'shop',
      /*产品类别列表*/
      categoryList: [],
      /*当前选中*/
      categoryActive: [],
      /*搜索表单对象*/
      searchForm: {
        product_name: ''
      },
      /*产品数据表*/
      tableData: [],
      /*一页多少条*/
      pageSize: 5,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*选中的页面值*/
      activePage: null,
      shoplist: [],
      shopActive:'',
    };
  },
  created() {

    /*获取产品类别*/
    this.getCategory();
    this.getSupplier();

  },
  methods: {
    getSupplier() {
      let self = this;
      let Params = {};
      SupplierApi.supplierindexs(Params, true)
        .then(data => {
          self.loading = false;
          self.shoplist = data.data;
        })
        .catch(error => {
          self.loading = false;
        });
    },
    /*获取列表*/
    getCategory() {
      let self = this;
      let Params = {};
      SupplierApi.Category(Params, true)
        .then(data => {
          self.loading = false;
          self.categoryList = data.data.category;
          self.autoType();
        })
        .catch(error => {
          self.loading = false;
        });
      // let self = this;
      // self.loading = true;
      // PorductApi.catList({}, true)
      //   .then(res => {
      //     self.categoryList = res.data.list;
      //     self.autoType();
      //     self.loading = false;
      //   })
      //   .catch(error => {
      //     self.loading = false;
      //     console.log(error);
      //   });
    },

    /*自动选择类别*/
    autoType(i) {
      i = i | 0;
      this.categoryActive = [];
      if (this.categoryList.length > 0) {
        let item = this.categoryList[i];
        this.categoryActive.push(item.category_id);
        if (item.child && typeof item.child != 'undefined' && item.child.length > 0) {
          this.categoryActive.push(item.child[0].category_id);
          this.changeFunc(item.child[0]);
        } else {
          i++;
          this.autoType(i);
        }
      }
    },
    shopChange(e){
      let shopItem  = this.shoplist.find(item=>item.shop_supplier_id==e)
      let obj = {};
      obj.name = shopItem.name;
      obj.url = 'pages/shop/shop?shop_supplier_id=' + e;
      obj.type = '店铺';
      this.$emit('changeData', obj);
    },
    /*选择类别*/
    changeCategory(e) {
      let item = this.$refs['cascader'].getCheckedNodes();
      this.changeFunc(item[0].data);
    },
    /*选中的值*/
    changeFunc(e) {
      let obj = {};
      obj.name = e.name;
      obj.url = 'pages/shopcate/shopcate?category_id=' + e.category_id;
      obj.type = '主营业务';
      this.$emit('changeData', obj);
    }


  }
};
</script>
<style scoped>
.table-wrap.setlink-product-table .product-info .pic {
  width: 20px;
  height: 20px;
  background: #FFFFFF;
}

.table-wrap.setlink-product-table .product-info .pic img {
  width: 20px;
  height: 20px;
}

.marketing-box .el-tree-node__content {
  height: 30px;
}

.marketing-box .el-tree-node__content {
  margin-bottom: 10px;
}
</style>
